<template>
    <div id="mapContainer" class="TianDiMap"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import OSM from 'ol/source/OSM';
// 地图是一层一层的加载
// ol 是以面向对象的形式来设计的api
// map中的配置选项
// target 表示地图示例挂载的容器
// view 表示地图的视图
// layers 表示地图的图层 所有的地图都有一个底图，Source 就是地图的来源
const initMap = () => {
    const map = new Map({
        target: 'mapContainer',
        view: new View({
            center: [116.397477, 39.908692],
            zoom: 10,
            projection: 'EPSG:4326'
        }),

        layers: [
            new TileLayer({
                source: new XYZ({
                    url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={你的密钥}'
                })
            })
        ]
    });

    console.log(map, 'map==');
};

onMounted(() => {
    initMap();
});
</script>

<style scoped lang="scss">
.TianDiMap {
    width: 100%;
    height: 100%;
}
</style>

